// 员工数据
<template>
    <div class="statistics">
      <div class="install-title">
          <div>
            员工数据
          </div>
      </div>
      <div class="install-main">
        <div class="statistics-top">
          <div class="statisticsData statisticsData-one">
            <div class="statisticsData-top">
              当前企业人数
            </div>
            <div class="statisticsData-one-bot">
              {{dataObj.memberCount | strFun}}
            </div>
          </div>
          <div class="statisticsData statisticsData-two">
            <div class="statisticsData-top">
              员工激活情况
            </div>
            <div class="ssd-t-list">
              <div class="ssd-t-l-li">
                <div>
                  已激活
                </div>
                <div class="li-grop" @click="activeClick('Y')">
                   {{dataObj.activationCount | strFun}}
                </div>
              </div>
              <div class="ssd-t-l-li">
                <div>
                  未激活
                </div>
                <div class="li-red" @click="activeClick('IN')">
                   {{dataObj.unActivationCount | strFun}}
                </div>
              </div>
            </div>
            <div class="ssd-t-but" @click="activeClick('IN')">
              查看未激活人员
            </div>
          </div>
          <!-- <div class="statisticsData statisticsData-thr">
            <div class="statisticsData-top">
              员工离职情况
            </div>
            <div class="ssd-t-list">
              <div class="ssd-t-l-li">
                <div>
                  目前累计离职人数
                </div>
                <div class="li-red">
                   {{dataObj.desertCount | strFun}}
                </div>
              </div>
            </div>
            <div class="ssd-t-but">
              查看离职人员
            </div>
          </div> -->
        </div>
        <div class="statistics-bottom">
          <div class="ss-b-title">
            企业每日分析 <small>(截止当前时间)</small>
          </div>
          <div class="ss-b-number">
            伯通工作使用人数
          </div>
          <div id="map" class="ss-b-map">

          </div>
        </div>
      </div>
    </div>
</template>
<script>
let echarts = require("echarts");
import { mapActions } from "vuex";
export default {
  data() {
    return {
      dataObj: {},
      AccessTokenVal: "",
      echartNums: [0, 0, 0, 0, 0, 0, 0], //图标对应数据
      echartDate: ["0", "0", "0", "0", "0", "0", "0"] // 图标对应日期
    };
  },
  filters: {},
  created: function() {
    var self = this;
  },
  watch: {},
  filters: {
    strFun(val) {
      if (val) {
        return val;
      } else {
        return "0";
      }
    },
    timeFun(val) {
      if (val) {
        var standardTime = new Date(val * 1);
        var y, m, d, h, f;
        y = standardTime.getFullYear();
        m = standardTime.getMonth() + 1;
        m = m > 9 ? m : "0" + m;
        d = standardTime.getDate();
        d = d > 9 ? d : "0" + d;
        h = standardTime.getHours();
        h = h > 9 ? h : "0" + h;
        f = standardTime.getMinutes();
        f = f > 9 ? f : "0" + f;
        return m + "-" + d;
      } else {
        return "暂无";
      }
    }
  },
  methods: {
    activeClick(val) {
      var self = this;
      self.$router.push({
        path: "/home/business/statisticsActive?IN=" + val
      });
    },
    mapListsFun() {
      var self = this;
      var map = echarts.init(document.getElementById("map"));
      map.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "3%",
          top: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: self.echartDate
          }
        ],
        yAxis: [
          {
            type: "value",
            // max: 90,
            // min: 0,
            minInterval: 1
          }
        ],
        series: [
          {
            symbolSize: 10,
            // areaStyle: {},
            type: "line",
            smooth: true, // 曲线样式
            stack: "",
            itemStyle: {
              normal: {
                color: "#38adff",
                lineStyle: {
                  width: 4,
                  color: "#38adff"
                }
              }
            },
            data: self.echartNums
          }
        ]
      });
    },
    ...mapActions(["getapiorgdata"])
  },
  mounted() {
    var self = this;
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
      self
        .getapiorgdata({
          companyId: sessionStorage.getItem("ORGID")
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.dataObj = data.data;

              if (data.data.chart) {
                self.echartDate = [];
                self.echartNums = [];
                var arr = data.data.chart;
                for (var Key in arr) {
                  self.echartDate.push(Key);
                  self.echartNums.push(arr[Key]);
                }
                self.mapListsFun();
              }
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    }
  }
};
</script>
<style scoped>
.ss-b-map {
  height: 280px;
  width: 690px;
  margin-top: 30px;
}
.ss-b-number {
  height: 43px;
  width: 95%;
  font-size: 12px;
  line-height: 43px;
  color: #000;
  text-align: center;
  margin-top: 35px;
}
.ss-b-title {
  height: 43px;
  width: 95%;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  line-height: 43px;
  color: #333;
}
.ss-b-title small {
  font-size: 18px;
  color: #777;
}
.statistics-bottom {
  height: 500px;
  width: 100%;
  margin-top: 35px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  overflow: hidden;
  align-items: center;
}
.li-grop {
  color: #3c763d;
  cursor: pointer;
}
.li-red {
  color: #a94442;
  cursor: pointer;
}
.ssd-t-l-li {
  height: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-size: 14px;
  overflow: hidden;
  justify-content: space-around;
}
.ssd-t-but {
  height: 33px;
  width: 120px;
  border-radius: 5px;
  background-color: #38adff;
  font-size: 14px;
  color: #fff;
  line-height: 33px;
  text-align: center;
  cursor: pointer;
  margin-top: 25px;
}
.ssd-t-list {
  height: 75px;
  width: 100%;
  margin-top: 20px;
  overflow: hidden;
}
.statisticsData-one-bot {
  height: 180px;
  line-height: 180px;
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: #000;
}
.statisticsData-top {
  width: 100%;
  height: 40px;
  background-color: #fbfbfb;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #dfdfdf;
}
.statistics-top {
  width: 95%;
  display: flex;
  height: 220px;
  justify-content: space-around;
  margin-top: 30px;
}
.statisticsData-one {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.statisticsData-two,
.statisticsData-thr {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}
.statisticsData {
  width: 340px;
  height: 220px;
  border-radius: 5px;
  border: 1px solid #dfdfdf;
  margin-right: 30px;
}

.install-main {
  min-height: 70px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.install-title {
  height: 45px;
  margin-top: 20px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.install-title > div {
  width: 95%;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  border-bottom: 1px solid #ccc;
}

.statistics {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  min-height: 700px;
}
</style>